<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <div class="create" @click="oneLevel">添加一级</div>
          <div class="create" @click="twoLevel">添加二级</div>
          <div class="create" @click="threeLevel">添加三级</div>
        </div>
      </el-col>
    </el-row>
    <div class="main">
      <div class="orgbtn fl">
        <label class="create bgblue">任务类型</label>
        <em></em>
      </div>
      <div class="listItem">
        <ul v-if="taskType.length != 0">
          <li :class="index==level1?'activeli':''" v-for="(item,index) in taskType" :key="index" class="itemli">
            <hr></hr>
            <div class="itemson" @click='actived(index, "level1")'>
              <em :class="(index==level1||!item.subset)?'el-icon-minus':'el-icon-plus'"
                  style="cursor: pointer;"></em>
              <span :class="index==level1?'active':''" style="cursor: pointer;">{{item.name}}</span>

            </div>
            <i class="el-icon-edit edit-icon" @click="editbtn(item, 1)"
               style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
            <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delbtn(item)"
               style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
            <hr v-if="index==level1 && item.subset" style="width:200px"/>
            <div class="items" ref="ele" v-if="index==level1 && item.subset">
              <ul>
                <li v-for="(item1,index1) in item.subset" :key="index1"
                    :class='item.subset.length>2?"margin50":"margin25"' class="itemlison">
                  <hr class="fl width-30"></hr>
                  <div class="itemson" @click='actived(index1, "level2")'>
                    <em :class="index1==level2||!item1.subset?'el-icon-minus':'el-icon-plus'"
                        style="cursor: pointer;"></em>
                    <span :class="index1==level2?'active':''">{{item1.name}}</span>
                  </div>
                  <i class="el-icon-edit edit-icon" @click="editbtn(item1, 2)"
                     style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                  <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delbtn(item1)"
                     style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>

                  <hr v-if="index1==level2 && item1.subset" style="width:200px"></hr>
                  <div class="items" ref="ele" style="width: 100%;" v-if="index1==level2 && item1.subset">
                    <ul v-if='index1==level2' style="width: 100%;">
                      <li v-for="(item2,index2) in item1.subset" :key="index2"
                          :class='item1.subset.length>2?"margin50":"margin25"' class="itemlison" style="z-index: 100;">
                        <hr class="fl width-30"></hr>
                        <div class="itemson">
                          <em class="el-icon-minus"></em>
                          <span id="ul1" class="active">{{item2.name}}</span>
                        </div>
                        <i class="el-icon-edit edit-icon" @click="editbtn(item2, 3)"
                           style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                        <i class="el-icon-delete edit-icon" v-if='cuid==1' @click="delbtn(item2)"
                           style="position:relative;z-index:3;cursor: pointer;margin-left:10px;"></i>
                      </li>
                    </ul>
                  </div>

                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 任务类型 -->
    <el-dialog title="" :visible.sync="leveldialog" width="400px" append-to-body @closed="toClose" v-if="taskType.length != 0">
        <span>
            <h2 class="titleblue">{{addThird ? '添加三级任务类型':'添加二级任务类型'}}</h2>
            <div class="contant type-div">
                <el-form ref="form" :model="lvform" label-width="100px">
                    <el-form-item label="一级任务类型">
                        <el-select v-model="lvform.level1" placeholder="请选择" class="select-width-220"
                                   @change="levelChange($event)">
                            <el-option v-for="item in taskType" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二级任务类型">
                        <el-select v-model="lvform.level2" placeholder="请选择" class="select-width-220" v-if="addThird">
                            <el-option v-for="item in taskType2" :key="item.value" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                        <el-input v-model="lvform.level2" class="select-width-220" v-if="!addThird"></el-input>
                    </el-form-item>
                  <el-form-item label="三级任务类型" v-if="addThird">
                        <el-input v-model="lvform.level3" class="select-width-220"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </span>
      <el-row :gutter="24" class="footerbtn">
        <el-button class="sure" @click="lvbtn">添加</el-button>
        <el-button class="cancel" @click="toClose">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import taskTypeService from '@/services/TaskTypeService.js'
  import DataTable from '@/components/common/DataTable.vue'

  export default {
    props: ['taskType'],
    name: 'TaskType',
    components: {
      'data-table': DataTable
    },
    data () {
      return {
        addThird: false,
        activeName2: '1',
        sos: [],
        croptions: [],
        // taskType: [],
        taskType2: [],
        leveldialog: false,
        objectsos: [],
        level1: -1,
        level2: -1,
        dlevel1: -1,
        dlevel2: -1,
        mlevel1: -1,
        mlevel2: -1,
        ddid: '',
        id: '',
        detail: '',
        mileagedialog: false,
        lvform: {
          level1: '',
          level2: '',
          level3: '',
        },
        mileageForm: {
          org: '',
          dept: '',
          shipName: '',
          startTime: '',
          endTime: '',
          length: ''
        },
        cuid: 1,
        ztoptions: [],
        dpoptions: [],
        mltitle: '添加巡航里程'
      }
    },
    methods: {
      delbtn (item) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            taskTypeService.delete(item.id).then(res => {

              this.$alert('删除成功')
              this.leveldialog = false
              this.$emit('update')
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      oneLevel () {
        this.$prompt('请输入一级任务类型', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: '一级任务类型不能为空',
          customClass: 'customClass',
        }).then(({value}) => {
          let obj = {
            checkContent: '', //  检查内容 ,
            content: '', // : 内容 ,
            level: 1, //  级别 ,
            name: value, // : 名称 ,
            parentId: null, //  父ID ,
            requirements: '', // : 要求 ,
            sysUsers: null, //  用户 ,
            taskId: '', //  任务ID ,
            userDefined: '', // 用户定义
          }
          taskTypeService.create(obj).then(res => {
            this.$emit('update')
          })
        }).catch(() => {
          this.$message('您已取消此次添加')
        })
      },
      levelChange (val) {
        this.taskType.forEach(item => {
          if (item.id == val && item.subset) {
            this.taskType2 = item.subset
          }
        })
      },
      twoLevel () {
        this.leveldialog = true
      },
      threeLevel () {
        this.leveldialog = true
        this.addThird = true
      },
      toClose () {
        this.leveldialog = false
        this.addThird = false
        this.lvform = {}
      },
      editbtn (item, num) {
        let str = '', error = ''
        switch (num) {
          case 1:
            str = '请输入一级任务类型'
            error = '一级任务类型不能为空'
            break
          case 2:
            str = '请输入二级任务类型'
            error = '二级任务类型不能为空'
            break
          case 3:
            str = '请输入三级任务类型'
            error = '三级任务类型不能为空'
            break
        }
        this.$prompt(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
          inputErrorMessage: error,
          inputValue: item.name,
          customClass: 'customClass',
        }).then(({value}) => {
          let obj = {
            checkContent: item.checkContent, //  检查内容 ,
            content: item.content, // : 内容 ,
            level: item.level, //  级别 ,
            name: value, // : 名称 ,
            parentId: item.parentId, //  父ID ,
            requirements: item.requirements, // : 要求 ,
            sysUsers: item.sysUsers, //  用户 ,
            taskId: item.taskId, //  任务ID ,
            userDefined: item.userDefined, // 用户定义
            id: item.id,
            createTime: item.createTime
          }
          taskTypeService.update(obj).then(res => {
            this.leveldialog = false
            this.$alert('编辑成功')
            this.$emit('update')
          })
        }).catch(() => {
          this.$message('您已取消此次编辑')
        })
      },
      actived (index, key) {
          if (this[key] == index) {
              this[key] = -1
              return false
          }
          this[key] = index
          // this.fheight= this.$refs.ele[index].clientHeight+'px'
      },
      actived1 (index) {
        this.level1 = index
      },
      actived2 (index) {
        this.level2 = index
      },
      lvbtn () {
        if (!this.lvform.level1) {
          this.$alert('请选择一级任务类型')
          return false
        }
        if (!this.lvform.level2) {
          this.$alert('请输入二级任务名称')
          return false
        }
        if (this.addThird && !this.lvform.level3) {
          this.$alert('请输入三级任务名称')
          return false
        }

        let obj = {
          checkContent: '', //  检查内容 ,
          content: '', // : 内容 ,
          level: 2, //  级别 ,
          name: this.lvform.level2, // : 名称 ,
          parentId: this.lvform.level1, //  父ID ,
          requirements: '', // : 要求 ,
          sysUsers: null, //  用户 ,
          taskId: '', //  任务ID ,
          userDefined: '', // 用户定义
        }
        if (this.addThird) {
          obj.name = this.lvform.level3
          obj.parentId = this.lvform.level2
          obj.level = 3
        }
        taskTypeService.create(obj).then(res => {

          this.leveldialog = false
          this.$emit('update')
        })
      },
    }
  }
</script>

<style scoped lang="scss" src="../Dcustom.scss"></style>
